<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素之间的关系</title>

        <style>
            .container {
                border: 1px solid blue ;
                margin: 15px ;
            }

            .container>ul {
                border: 1px solid red ;
                margin: 10px ;
            }
        </style>

    </head>
    <body>

        <div class="container first">
            <ul>
                <li>111</li>
                <li>112</li>
                <li>113</li>
            </ul>
            <ul>
                <li>121</li>
                <li>122</li>
                <li>123</li>
            </ul>
        </div>

        <div class="container second">
            <ul>
                <li>211</li>
                <li>212</li>
                <li>213</li>
            </ul>
            <ul>
                <!-- onMouseOver 当 MouseOver 当 山峰没有棱角的时候 -->
                <li>221</li>
                <li>222</li>
                <li>223</li>
            </ul>
        </div>

        <script>
            ( ()=>{
                // 使用 type selector 选择页面上所有的 li 元素 
                let list = document.querySelectorAll( 'li' );
                console.log( list );
                let items = Array.from( list ); // 将 类数组实例 转换为 数组实例

                let listener = function(){
                    // 使用 arguments 获得 运行期传入的第一个实参
                    let event = arguments[ 0 ] ;
                    console.log( event ); // 第一个实参是个Event实例(表示事件)
                    let current = event.target ; // 获得事件源(即发生相应事件的元素)
                    console.log( current );
                    // 通过HTML元素的 style 属性来修改样式
                    current.style.background = '#9696fa' ;
                    // 通过 兄弟节点关系 来获得下一个元素
                    let next = current.nextElementSibling ;
                    console.log( next );
                    if( next ) {
                        next.style.background = '#fa9696' ;
                    }
                }

                let recover = function( event ){
                    let current = event.target ;
                    console.log( current );
                    current.style.background = 'transparent' ;
                    let next = current.nextElementSibling ;
                    if( next ) {
                        next.style.background = 'transparent' ;
                    }
                }

                items.forEach( e => {
                    // EventTarget.prototype.addEventListener( type , listener, useCapture )
                    // 为 e 所指向的 HTML元素 绑定一个 mouseover 事件 对应的事件监听器
                    e.addEventListener( 'mouseover' , listener , false ); 
                    // 为 e 所指向的 HTML元素 绑定一个 mouseout 事件 对应的事件监听器
                    e.addEventListener( 'mouseout' , recover , false ); 
                });
            })();
        </script>
        
    </body>
</html>